﻿@{
    ViewBag.Title = "头像页面";
    var F = Html.F();
}
@section head {
    <style>
        body{background:none !important;background-color:#000 !important;padding:0;}#themecontainer ul{list-style-type:none;margin:10px 0 0;padding:0;}#themecontainer ul li{display:inline-block;margin:0 10px 10px;border:solid 2px #000;padding:5px;}#themecontainer ul li .title{text-align:center;color:#666;font-size:13px;margin-top:5px;}#themecontainer ul li.hover,#themecontainer ul li.active{border-bottom-color:#fff;}#themecontainer ul li.hover .title,#themecontainer ul li.active .title{color:#fff;font-weight:bold;}#themecontainer ul li img{width:80px;}#themecontainer .grouptitle{color:#ccc;font-size:16px;border-bottom:solid 1px #333;padding:5px;margin:10px;}#themecontainer .note{color:#ccc;font-size:11px;margin-left:10px;display:inline-block;}#themecontainer .note a{color:#ccc;}
    </style>
}

@section body {
    <div id="themecontainer">
        <div class="grouptitle">
            Boy 头像
        </div>
        <ul>
            <li>
                <a href="javascript:;">
                    <img src="/res/images/head/boy/1.jpg" />
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="/res/images/head/boy/2.jpg" />
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="/res/images/head/boy/3.jpg" />
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="/res/images/head/boy/4.jpg" />
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="/res/images/head/boy/5.jpg" />
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="/res/images/head/boy/6.jpg" />
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="/res/images/head/boy/7.jpg" />
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="/res/images/head/boy/8.jpg" />
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="/res/images/head/boy/9.jpg" />
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="/res/images/head/boy/10.jpg" />
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="/res/images/head/boy/11.jpg" />
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="/res/images/head/boy/12.jpg" />
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="/res/images/head/boy/13.jpg" />
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="/res/images/head/boy/14.jpg" />
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="/res/images/head/boy/15.jpg" />
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="/res/images/head/boy/16.jpg" />
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="/res/images/head/boy/17.jpg" />
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="/res/images/head/boy/18.jpg" />
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="/res/images/head/boy/19.jpg" />
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="/res/images/head/boy/20.jpg" />
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="/res/images/head/boy/21.jpg" />
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="/res/images/head/boy/22.jpg" />
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="/res/images/head/boy/23.jpg" />
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="/res/images/head/boy/24.jpg" />
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="/res/images/head/boy/25.jpg" />
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="/res/images/head/boy/26.jpg" />
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="/res/images/head/boy/27.jpg" />
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="/res/images/head/boy/28.jpg" />
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="/res/images/head/boy/29.jpg" />
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="/res/images/head/boy/30.jpg" />
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="/res/images/head/boy/31.jpg" />
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="/res/images/head/boy/32.jpg" />
                </a>
            </li>
        </ul>
        <div class="grouptitle">
            Gril 头像
        </div>
        <ul>
            <li>
                <a href="javascript:;">
                    <img src="/res/images/head/gril/1.jpg" />
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="/res/images/head/gril/2.jpg" />
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="/res/images/head/gril/3.jpg" />
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="/res/images/head/gril/4.jpg" />
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="/res/images/head/gril/5.jpg" />
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="/res/images/head/gril/6.jpg" />
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="/res/images/head/gril/7.jpg" />
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="/res/images/head/gril/8.jpg" />
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="/res/images/head/gril/9.jpg" />
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="/res/images/head/gril/10.jpg" />
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="/res/images/head/gril/11.jpg" />
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="/res/images/head/gril/12.jpg" />
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="/res/images/head/gril/13.jpg" />
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="/res/images/head/gril/14.jpg" />
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="/res/images/head/gril/15.jpg" />
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="/res/images/head/gril/16.jpg" />
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="/res/images/head/gril/17.jpg" />
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="/res/images/head/gril/18.jpg" />
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="/res/images/head/gril/19.jpg" />
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="/res/images/head/gril/20.jpg" />
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="/res/images/head/gril/21.jpg" />
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="/res/images/head/gril/22.jpg" />
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="/res/images/head/gril/23.jpg" />
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="/res/images/head/gril/24.jpg" />
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="/res/images/head/gril/25.jpg" />
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="/res/images/head/gril/26.jpg" />
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="/res/images/head/gril/27.jpg" />
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="/res/images/head/gril/28.jpg" />
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="/res/images/head/gril/29.jpg" />
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="/res/images/head/gril/30.jpg" />
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="/res/images/head/gril/31.jpg" />
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="/res/images/head/gril/32.jpg" />
                </a>
            </li>
        </ul>

    </div>
}

@section script {
   
    <script>
    F.ready(function () {
        // 选择主题窗口
        $('#themecontainer li').hover(function () {
            $(this).addClass('hover');
        }, function () {
            $(this).removeClass('hover');
        }).click(function () {

            var imgNode = $(this).find('img');

            //alert(imgNode.attr('src'));
            parent.setPhoto(imgNode.attr('src'));
        });
    });
</script>

}